<template>
  <div class="login-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="90px"
      class="demo-ruleForm"
      label-suffix=":"
      label-position="right"
    >
      <h2 class="login-title">天天向上吧</h2>
      <el-form-item label="用户姓名" prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input v-model="ruleForm.password" show-password placeholder="请输入用户密码"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realname">
        <el-input v-model="ruleForm.realname" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input
          v-model="ruleForm.email"
          type="email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="ruleForm.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <!-- 
                    el-radio-group:单选框组
                    内部放置单选框    
                    v-model:就是绑定的值，此处对应:label中的值
                -->
        <el-radio-group v-model="ruleForm.role">
          <!-- label:就相当于h5单选框中的value属性 -->
          <el-radio :label="0">普通用户</el-radio>
          <el-radio :label="1">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio :label="0">男性</el-radio>
          <el-radio :label="1">女性</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传头像" prop="path">
        <el-upload
          action="http://db.etoak.com:9527/sysFile/fileUpload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
          :on-success="handleAvatarSuccess"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :show-file-list="true"
          :before-upload="beforeAvatarUpload"
          ref="up"
        >
          <!--  -->
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="regSubmitForm('ruleForm')">注册</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button><br />
        <button
          @click="goLogin"
          style="
            margin-left: 50px;
            text-decoration: underline;
            color: blue;
            cursor: pointer;
            border: none;
            outline: none;
            backgroundcolor: transparent;
          "
        >
          有账号？直接登录
        </button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        realname: "",
        email: "",
        phone: "",
        role: 0,
        gender: 0,
        path: "",
      },
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 32, message: "长度在 6 到 32 个字符", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 0, max: 10, message: "长度在 0 到 10 个字符", trigger: "blur" },
        ],
        path: [{ required: true, message: "请上传文件" }],
      },
    };
  },
  methods: {
    regSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$dao.addUser(this.ruleForm).then((res) => {
            // console.log(res);
            if (res.data.flag) {
              this.$message.success(res.data.msg);
              this.$router.push("/login");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$message.error("表单填写有误");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.email = "";
      this.ruleForm.phone = "";
      this.fileList = []
    },
    goLogin() {
      this.$router.push("/login");
    },
    handleRemove(file, fileList) {
      /* 必须首先打印此处观察file是什么，fileList是什么 */
      // console.log("handleRemove执行啦", file, fileList);
      /* 此处进行上传文件被删除之后的逻辑 */
      // console.log(this.ruleForm.paths);
      if (file.response) {
        this.ruleForm.path=""
      }
    },
    /* 点击上传文件的钩子 */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      // console.log(this.dialogImageUrl);
    },
    /* 
            文件上传成功时的钩子 
            response:上传成功返回的响应
            file:每次上传的文件对象
            fileList:目前所有已经上传的文件数组
        */
    handleAvatarSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
      /* 一般在上传成功后在此处进行业务逻辑，例如将返回的路径添加进表单双向绑定的data中的对象 */
      if (response.flag) {
        /* 将返回的路径添加进封装路径的表单项属性 */
        this.ruleForm.path=response.data.path;
      }
    },
    /* 传递参数超过个数 */
    handleExceed(file, fileList) {
      this.$message.error("最多传递一张图片！");
    },
    /* 
            上传之前的钩子 
            此处多用来进行上传时的格式查询等等
        */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
      // return false
    },
  },
};
</script>

<style scoped>
.el-form-item .el-input {
  width: 200px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: calc(100%+30px);
  background: url("../../assets/login.jpg");
}
.demo-ruleForm {
  width: 350px;
  /* 上下间隙 160px, 左右自动居中 */
  margin: 55px auto;
  background-color: rgb(255, 255, 255, 0.6);
  padding: 28px;
  /* padding-top: 51px; */
  border-radius: 60px;
}
.login-title {
  color: #303133;
  text-align: center;
}
</style>
